<html>
<head>
    <title>Eclipse Timeline Plugin</title>
    <link rel='stylesheet' href='styles.css' type='text/css' />
    <script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>
    <script>
        var tl;
		function onLoad() {
		  var eventSource = new Timeline.DefaultEventSource();
		  var bandInfos = [
		    Timeline.createBandInfo({
		        eventSource:    eventSource,
		        date:           new Date(),
		        width:          "80%", 
		        intervalUnit:   Timeline.DateTime.MONTH, 
		        intervalPixels: 250
		    }),
		    Timeline.createBandInfo({
		        eventSource:    eventSource,
		        date:           new Date(),
		        width:          "20%", 
		        intervalUnit:   Timeline.DateTime.YEAR, 
				showEventText:  false,
		        intervalPixels: 400
		    })
		  ];
		  bandInfos[1].syncWith = 0;
		  bandInfos[1].highlight = true;
		  
		  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
		  Timeline.loadXML("timeline.xml", function(xml, url) { eventSource.loadXML(xml, url); });
		}
		
		var resizeTimerID = null;
		function onResize() {
		    if (resizeTimerID == null) {
		        resizeTimerID = window.setTimeout(function() {
		            resizeTimerID = null;
		            tl.layout();
		        }, 500);
		    }
		}
    </script>
</head>
<body onload="onLoad();" onresize="onResize();">
<div id="my-timeline" style="height: 400px; border: 1px solid #aaa"></div>
</body>
</html>
